<!--
 * @Date: 2023-04-17 09:42:33
 * @LastEditTime: 2023-04-23 10:42:43
-->
<template>
  <div class="translate">
    <div class="tree_box">
      <Tree
        ref="treeRef"
        routerName="translate"
        externClassName="trans_tree"
        @selectSuccess="selectTreeNodeSuccess"
        @treeCUDSuccess="cudSuccess"
      />
    </div>

    <div class="data_box">
      <StringList
        ref="dataRef"
        routerName="translate"
        :selectNode="selectNode"
        @treeCUDSuccess="cudSuccess"
        @listCUDSuccess="cudSuccess"
      />
    </div>
  </div>
</template>

<script>
import Tree from '../tree/tree.vue'
import StringList from '../string/list.vue'

export default {
  name: 'Translate',

  components: { Tree, StringList },

  data () {
    return {
      selectNode: {}
    }
  },

  mounted () {},

  methods: {
    // tree结点选中回调
    selectTreeNodeSuccess (e) {
      const projectId = e.value

      this.selectNode = { projectId }
      this.$refs.dataRef.form = { key: '', project_id: projectId }
      this.getTableData()
    },
    cudSuccess (e) {
      const { selectId, editId } = e
      // 树选中项与编辑项为同一项目下内容(selectId === editId)、编辑（modalType:1）项目(type:0)才获取表格和树最新数据----表头及表格内容可能会更新
      if (selectId !== -1 && selectId === editId) this.getTreeAndTableData()
      // 获取树最新数据
      else this.getTreeData()
    },
    getTreeData () {
      this.$refs.treeRef.getTreeData()
    },
    getTableData () {
      this.$refs.dataRef.getData()
    },
    getTreeAndTableData () {
      this.$refs.treeRef.getTreeData()
      this.$refs.dataRef.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.translate {
  height: 100%;
  display: flex;
  padding: 24px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 2px;

  .tree_box {
    width: 16%;
    height: 100%;
    position: relative;

    &::after {
      position: absolute;
      right: 0;
      top: -24px;
      width: 1px;
      height: calc(100% + 48px);
      background: #e8e8e8;
      content: '';
    }
  }

  .data_box {
    width: 84%;
    height: 100%;
    padding: 0 0 24px 24px;
    box-sizing: border-box;
  }
}
</style>
